<template>
  <div class="app-container">
    <el-card type="border-card">
      <div class="flexDiv">
        <div class="card-title">应急演习</div>
      </div>
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="演习名称：">
          <el-input
            v-model="queryParams.pracName"
            placeholder="请输入"
            style="height: 32px; width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary">查询</el-button> -->
          <el-button-group>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="search">查询</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
      <div class="title">
        <div class="title-name">列表详情:</div>
      </div>
      <div style="margin: 0px 0px 20px 10px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="2">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              style="width: 80px"
              >新增</el-button
            >
          </el-col>
          <el-col :span="2">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              style="width: 80px"
              @click="handleDelete"
              >删除</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="tableData"
        style="width: 98%"
        class="tableBox"
        stripe
        key="1"
        @selection-change="handleSelectionChange"
        max-height="450"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" prop="index" width="55">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="pracName"
          label="演习名称"
          align="center"
          width="300"
          sortable
        >
          <template slot-scope="scope">
            <div style="width: 280px">
              <!-- 未编辑情况 -->
              <el-popover
                placement="top-start"
                trigger="hover"
                v-show="
                  scope.row.id != renameId && scope.row.pracName.length > 15
                "
              >
                <div>{{ scope.row.pracName }}</div>
                <span slot="reference" @click="handleView(scope.row)">
                  <a style="color: rgb(24, 144, 255)">{{
                    scope.row.pracName.substr(0, 14) + "..."
                  }}</a></span
                >
              </el-popover>
              <span
                v-show="
                  scope.row.id != renameId && scope.row.pracName.length < 15
                "
              >
                <el-button type="text" @click="handleView(scope.row)">{{
                  scope.row.pracName
                }}</el-button>
              </span>
              <!-- 修改情况 -->
              <span v-show="scope.row.id == renameId"
                ><el-input
                  v-model="scope.row.pracName"
                  @input="(a) => inpFile(a, scope.row)"
                  style="width: 180px"
                  type="mini"
                ></el-input>
                <el-button
                  type="text"
                  size="mini"
                  style="margin-left: 8px"
                  @click="() => changeName(scope.row)"
                >
                  <i
                    class="el-icon-circle-check"
                    style="color: rgb(19, 206, 102)"
                  ></i>
                </el-button>
                <el-button type="text" size="mini">
                  <i
                    class="el-icon-circle-close"
                    style="color: gray"
                    @click="() => cancelFile(scope.row)"
                  ></i> </el-button
              ></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="pracPlanTime"
          label="计划时间"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="pracActualTime"
          label="实际时间"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column prop="facNames" label="堆芯名称" align="center">
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center" width="80">
          <template slot-scope="scope">
            <!-- v-model="scope.row.status" -->
            <el-switch
              :value="scope.row.status"
              @change="switchChange($event, scope.row)"
              active-color="#1890ff"
              inactive-color="#bfbfbf"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              :style="'padding:none;width:50px;'"
              @click="rename(scope.row)"
              >重命名</el-button
            >
            <el-button
              type="text"
              :style="'padding:none;width:30px;'"
              size="mini"
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="mini"
              :style="'padding:none;width:30px;'"
              @click="handleCopy(scope.row.id)"
              >复制</el-button
            >
            <el-button
              type="text"
              size="mini"
              :style="'padding:none;width:30px;color:red'"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getPracticeList"
        layout="total, prev, pager, next"
      />
      <!-- </el-tab-pane> -->
    </el-card>
  </div>
</template>

<script>
import {
  pracBaseList,
  delPractice,
  isPrace,
  pracInfo,
  exePractice,
  stopPractice,
  copyInfo,
  changePracBase,
} from "@/api/emergency/script";
export default {
  name: "practice",
  data() {
    return {
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pracName: "",
        isAsc: "descending",
        orderByColumn: "updateTime",
      },
      formInline: {},
      total: 0,
      value: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      renameId: "", // 记录重命名的文件名对应的id，便于修改为input
      status: 0, // 演习状态：是否有演习开始 0无 1有
      startPracticeId: "", // 全局演习的id
      tempName: "",
    };
  },
  mounted() {
    // this.getAllPracticeInfo();
    this.getPracticeList();
    //================================
  },
  methods: {
    getAllPracticeInfo() {
      this.getIsPrac();
      this.getPracInfo();
    },
    // 获取全局是否有开始的演习
    getIsPrac() {
      isPrace().then((res) => {
        this.status = res.data.paramValue;
        console.log(res.data.paramValue, "是否有运行模式开始的");
      });
    },
    // 获取哪个演习是开始的
    getPracInfo() {
      pracInfo().then((res) => {
        console.log(res.data.paramValue, "获取全局演习id");
        this.startPracticeId = res.data.paramValue;
        this.getPracticeList();
      });
    },
    // 演习列表数据
    getPracticeList() {
      this.$axios
        .get("/static/emergency/practice/scriptList.json")
        .then((res) => {
          // pracBaseList(this.queryParams).then((res) => {
          if (res.data.code == 200) {
            // this.tableData = res.rows;
            this.total = res.data.total;
            console.log("status", this.status);
            if (this.status == 1) {
              res.data.rows.forEach((item) => {
                // item.status = 0;
                if (item.id == this.startPracticeId) {
                  item.status = true;
                  console.log(this.startPracticeId, "开始演习的id");
                } else {
                  item.status = false;
                }
              });
            }
            console.log("tableData", this.tableData);
            this.tableData = res.data.rows;
          }
        });
    },
    // 查询
    search() {
      this.queryParams.pageNum = 1;
      this.getPracticeList();
    },
    // 重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        pracName: "",
      };
      this.getPracticeList();
    },
    // 删除演习
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delPractice(ids);
        })
        .then(() => {
          this.queryParams.pageNum = 1;
          this.getPracticeList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 新增跳转页面
    handleAdd() {
      this.$router.push({
        path: "/practice/script/new",
      });
    },
    handleView(row) {
      this.$router.push({
        path: "/practice/detail",
        query: {
          id: row.id,
        },
      });
    },
    handleEdit(row) {
      this.$router.push({
        path: "/practice/emergPractice/script/new",
        query: {
          id: row.id,
        },
      });
    },
    // 复制演习
    handleCopy(id) {
      copyInfo({ id: id }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("复制成功");
          console.log(res, "复制成功");
          // 列表刷新数据
          this.getPracticeList();
        }
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // --表格重命名--------
    // 重命名
    rename(row) {
      // 变化文件名称为input
      console.log("=============================");
      console.log(row, "重命名");
      this.renameId = row.id;
      this.tempName = row.pracName;
    },
    inpFile(value, data) {
      console.log(data, "input");
      data.label = value;
    },
    changeName(data) {
      console.log(data, "修改文件名称");
      if (data.pracName == "") {
        this.$message.warning("文件名不能为空");
        return;
      }
      const params = {
        pracName: data.pracName,
        id: data.id,
        facIds: data.facIds,
        pracPlanTime: data.pracPlanTime,
      };
      debugger;
      changePracBase(params).then((res) => {
        if (res.code == 200) {
          //  console.log(res);
          this.msgSuccess("重命名成功");
          // 刷新页面+关闭编辑
          this.renameId = "";
          this.getPracticeList();
        }
      });
    },
    cancelFile(data) {
      // this.getPracticeList();
      this.renameId = "";
      console.log("取消编辑");
      data.pracName = this.tempName;
      // 页面刷新
      // this.getPracticeList();
    },
    change(e, data) {
      console.log("change", e, data);
    },
    // 演习的启动和关闭
    switchChange(e, data) {
      console.log(e, data);
      // 打开
      if (e == 1) {
        this.$confirm("确认开启应急演习？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exePractice({ id: data.id });
          })
          .then((res) => {
            console.log(res);
            // this.getTreeselect();
            this.msgSuccess("开启成功");
            this.getAllPracticeInfo();
          })
          .catch(() => {});
      } else if (e == 0) {
        // 关闭
        this.$confirm("确认关闭应急演习？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return stopPractice({ id: data.id });
          })
          .then((res) => {
            if (res.code == 200) {
              console.log(res);
              // this.getTreeselect();
              this.msgSuccess("成功");
              this.getAllPracticeInfo();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px 20px 10px;
  .title-name {
    width: 80px;
  }
  .title-refresh {
    width: 70px;
    color: #1890ff;
    text-align: right;
    padding-right: 15px;
  }
}
#cefr-box.app-container {
  padding: 0px;
  ::v-deep.el-card {
    border: 0px;
  }
  ::v-deep.el-card.is-always-shadow {
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%);
  }

  ::v-deep.el-card__body {
    padding: 10px;
  }
}
// tab
::v-deep .el-tabs__nav {
  width: 100%;
}
::v-deep .el-tabs__item {
  width: 33.3%;
  text-align: center;
  height: 40px;
  // padding-top: 2px;
  // padding-bottom: 4px;
}
// el-form
::v-deep .el-form {
  height: 55px;
  padding: 10px;
  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
    color: black;
  }
}
::v-deep .el-input__inner {
  // width: 200px;
  height: 28px;
  font-size: 14px;
}
.el-button {
  height: 28px;
  // width: 64px;
  font-size: 14px;
  line-height: 5px;
}
// table
::v-deep .el-table {
  height: 460px;
  border: 0;
  padding-left: 10px;
  th,
  tr,
  td {
    border: 0;
  }
  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }
  .el-table__fixed:before {
    height: 0;
  }
  // 去掉表格下划线
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
    color: black;
    font-size: 14px;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
  }
  // 去掉表头下划线
  thead tr th.is-leaf {
    border: 0px solid #ebeef5;
    border-right: none;
  }
}
// 检测状态
.zc {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: green;
  margin: auto 9px;
}
.yjbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #e19b16;
  margin: auto 9px;
}
.ejbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #e84b3f;
  margin: auto 9px;
}
.lx {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: gray;
  margin: auto 9px;
}
.flexDiv {
  display: flex;
  justify-content: space-between;
}
.card-title {
  padding-left: 10px;
  margin: 6px 0px;
  font-size: 16px;
  font-weight: bold;
}
</style>